<template>
  <div class="view-container">
    <header-module
      title="完善资质"
      :left-custom="false"
      padding
    >
      <template #btn>
        <el-button
          class="border-btn"
          size="small"
          @click="back"
        >返回</el-button>
        <el-button
          class="main-btn"
          size="small"
          type="primary"
          :loading="btnLoading"
          @click="submit"
        >提交审核</el-button>
      </template>
    </header-module>
    <div class="main-content">
      <item-title title="基本信息" />
      <base-info
        ref="baseInfoRef"
        :detail="detailData"
        :types="types"
      />
      <item-title title="资质信息" />
      <cert
        ref="certRef"
        :detail="detailData"
        :types="types"
      />
    </div>
  </div>
</template>

<script>
import {defineAsyncComponent, defineComponent, getCurrentInstance, inject, onMounted, reactive, ref, toRefs,} from 'vue'
import {useRoute, useRouter} from 'vue-router'

export default defineComponent({
  components: {
    baseInfo: defineAsyncComponent(() => import('../../modules/baseInfo.vue')),
    cert: defineAsyncComponent(() => import('../../modules/cert.vue')),
  },
  setup(props, context) {
    const router = useRouter()
    const route = useRoute()
    const currentInstance = getCurrentInstance()
    const api = inject('api')
    const baseInfoRef = ref(null)
    const certRef = ref(null)
    var reactiveData = reactive({
      id: route.query.distributorId ? Number(route.query.distributorId) : 0,
      detailData: null,
      btnLoading: false,
    })
    const back = () => {
      router.back()
    }
    const getDetail = () => {
      api.distributors
        .DISTRIBUTORS_DETAIL({ id: reactiveData.id })
        .then((res) => {
          if (res.code === 0) {
            reactiveData.detailData = res.data.DistributeInfo
          }
        })
    }
    const updateFiles = (data) => {
      reactiveData.btnLoading = true
      api.distributors.DISTRIBUTORS_FILES_UPDATE(data).then((res) => {
        if (res.code === 0) {
          currentInstance.proxy.customMessage({
            type: 'success',
            message: '保存成功',
          })
          router.back()
        } else {
          currentInstance.proxy.customMessage({
            type: 'error',
            message: res.msg,
          })
          reactiveData.btnLoading = false
        }
      })
    }
    const submit = () => {
      var formData = {
        id: reactiveData.id,
        qualifications: [],
      }
      const cert = certRef.value.getFileData()
      console.log(cert)
      if (cert.bol) {
        formData.qualifications = cert.files
      } else {
        return
      }

      updateFiles(formData)
    }
    onMounted(() => {
      if (reactiveData.id) {
        getDetail()
      }
    })

    return {
      baseInfoRef,
      certRef,
      ...toRefs(reactiveData),
      back,
      submit,
    }
  },
})
</script>

<style lang="scss" scoped>
.item-container {
  margin-top: 20px;
}
</style>

